<template>
  <transition name="dialog-fade">
    <el-dialog
      v-if="showDialog"
      :title="dialogTitle"
      class="dialog-component"
      :visible.sync="showDialog"
      width="500px"
      @close="closeDialog(0)"
    >
      <el-form
        ref="form"
        :model="form"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-form-item label="岗位名称" :label-width="formLabelWidth" required>
        <el-input v-model="form.jobName" placeholder="请输入岗位名称" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="所属项目" :label-width="formLabelWidth" required>
        <el-select v-model="form.aloneProject" placeholder="请选择所属项目" style="width: 300px">
            <el-option label="图书馆" value="library"></el-option>
            <el-option label="教学楼" value="classroom"></el-option>
            <el-option label="资料" value="data"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="工作地址" placeholder="请输入工作地址" :label-width="formLabelWidth" required>
        <el-input v-model="form.jobAddr" placeholder="请输入岗位酬劳" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="岗位酬劳" :label-width="formLabelWidth" required>
        <el-input v-model="form.jobSal" placeholder="请输入岗位酬劳" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="岗位要求" :label-width="formLabelWidth" required>
        <el-input v-model="form.requirement" placeholder="请输入岗位要求" autocomplete="off" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="性别要求" :label-width="formLabelWidth" required>
        <el-select v-model="form.sex" placeholder="请选择性别" style="width: 300px">
            <el-option label="男" value="man"></el-option>
            <el-option label="女" value="woman"></el-option>
            <el-option label="不限" value="unlimited"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item v-model="form.workTime" label="工作时间" :label-width="formLabelWidth" required>
        <el-time-select
            placeholder="起始时间"
            v-model="startTime"
            style="width: 150px"
            :picker-options="{
            start: '08:00',
            step: '00:10',
            end: '21:30'
            }">
        </el-time-select>
        <el-time-select
            placeholder="结束时间"
            style="width: 150px"
            v-model="endTime"
            :picker-options="{
            start: '08:00',
            step: '00:10',
            end: '21:30',
            minTime: startTime
            }">
        </el-time-select>
        </el-form-item>
        <el-form-item style="text-align: right;">
        <el-button type="primary" @click="submitForm('form')"
            >确定</el-button
        >
        <el-button @click="closeDialog(0)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </transition>
</template>
 
<script>
export default {
  name: "DialogComponent",
  props: {
    dialogTitle: {
      type: String,
      default: "添加岗位",
    },
    itemInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      showDialog: false,
      form: JSON.parse(JSON.stringify(this.itemInfo)),

    };
  },
  methods: {
    // 保存操作
    submitForm(formName) {
      const that = this;
      // const params = Object.assign(that.form, {});
      that.$refs[formName].validate((valid) => {
        if (valid) {
          // 走保存请求
          that.$message({
            message: "操作成功！",
            type: "success",
          });
          that.closeDialog(1);
        } else {
          return false;
        }
      });
    },
    // 关闭弹框
    closeDialog(flag) {
      this.$refs["form"].resetFields();
      this.showDialog = false;
      this.$emit("closeDialog", flag);
    },
  },
};
</script>
 
<style scoped lang="less">
.dialog-fade-enter-active {
  -webkit-animation: dialog-fade-in 0.3s;
  animation: dialog-fade-in 0.3s;
}
.dialog-fade-leave-active {
  -webkit-animation: dialog-fade-out 0.3s;
  animation: dialog-fade-out 0.3s;
}
@-webkit-keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
@keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
</style>